import {designPage, reactive} from "plain-ui-composition";
import {createCmsRange} from "./index";
import {reactivityApi} from "../../packages/utils/vueReactivityApi";
import {iCmsRangeItemData} from "./cms.image.range.utils";

export const DemoImageRange = designPage(() => {

  const { CmsRangeItem, CmsRange } = createCmsRange(reactivityApi);

  const state = reactive({
    list: [
      { top: 36, left: 33, width: 13, height: 32, },
      { top: 17, left: 48, width: 9, height: 36, },
    ] as iCmsRangeItemData[],
  });

  return () => (
    <div class="cms-visual-editor-base-container" data-component="image">
      <img src="http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png" style={{ width: '100%' }}/>
      <CmsRange list={state.list} onAdd={(val: iCmsRangeItemData) => state.list.push(val)}>
        {state.list.map((item, index) => (
          <CmsRangeItem data={item} key={index}/>
        ))}
      </CmsRange>
    </div>
  );
});
